<template>
  <view>
    <top-search :maxlength="18" :showState="true" :showMore="false" :showCarNo="false" :showCustomer="false"
      :showSearch="false" :placeHolder="'请输入司机车牌号/身份证号'" @bindChange="confirmChange"></top-search>
    <view class="record-card" v-for="(item, index) in dataSource" :key="index">
      <view class="title">{{ item.name }}</view>
      <view class="hr"></view>
      <view>
        <text>业务类型</text>
        <text>{{ bizType[item.bizType] }}</text>
      </view>
      <view>
        <text>拉黑类型</text>
        <text>{{ bizTypeListText(item.blacklistType) }}</text>
      </view>
      <view>
        <text>操作类型</text>
        <text>{{ operateTypeText(item.type) }}</text>
      </view>
      <view>
        <text class="remark-label">备注</text>
        <text class="remark">{{ item.notes || '' }}</text>
      </view>
      <view>
        <text>操作人</text>
        <text>{{ item.creator || '' }}</text>
      </view>
      <view>
        <text>操作时间</text>
        <text>{{ createTimeText(item.createTime) }}</text>
      </view>
    </view>
    <uni-load-more :status="isMore" />
  </view>
</template>
<script>
  import { toast } from '@/utils/common';
  import { getDictList } from '@/api/login';
  import { getBlacklistRecode } from '@/api/blackList';
  import { getDateFormat } from '@/utils/common';
  export default {
    data() {
      return {
        searchText: '',
        isMore: 'more',
        dataSource: [],
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        bizType:
        {
          "1": '采购',
          "2": '销售',
        },
        bizTypeList: [],
        operateTypeList: []
      };
    },
    computed: {
      operateTypeText() {
        return (value) => {
          return this.operateTypeList.find((e) => e.value === value.toString())
            ?.label;
        };
      },
      bizTypeListText() {
        return (value) => {
          return this.bizTypeList.find((e) => e.value === value.toString())
            ?.label;
        };
      },
      createTimeText() {
        return (value) => {
          if (!value) {
            return '';
          }
          return getDateFormat(value, true);
        };
      }
    },
    async mounted() {
      await this.getDictLists();
      this.getBlacklistRecode();
    },
    onPullDownRefresh() {
      this.initDataSource();
    },
    onReachBottom() {
      if (this.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getBlacklistRecode();
      }
    },
    methods: {
      confirmChange(data) {
        this.searchText = data.vehicleNo;
        this.initDataSource();
      },
      async getDictLists() {
        const res = await getDictList();
        if (res.code === 0) {
          this.operateTypeList = (res.data || []).filter(
            (e) => e.dictType === 'blacklist_operate_type'
          );
          this.bizTypeList = (res.data || []).filter(
            (e) => e.dictType === 'blacklist_type'
          );
        }
      },
      async getBlacklistRecode() {
        const data = { ...this.queryParam };
        if (this.searchText) {
          data['name'] = this.searchText;
        }
        const res = await getBlacklistRecode(data);
        if (res.code === 0) {
          const total = res?.data?.total || 0;
          const result = res.data?.list || [];
          this.getDataSource(result);
          this.getIsMore(total);
        } else {
          toast(res.msg);
        }
        wx.stopPullDownRefresh();
      },
      getDataSource(result) {
        if (this.dataSource.length) {
          this.dataSource = [...this.dataSource, ...result];
        }
        if (!this.dataSource.length) {
          this.dataSource = result;
        }
      },
      getIsMore(total) {
        if (total == this.dataSource.length) {
          this.isMore = 'noMore';
        } else {
          this.isMore = 'more';
        }
      },
      initDataSource() {
        this.queryParam.pageNo = 1;
        this.isMore = 'more';
        this.dataSource = [];
        this.getBlacklistRecode();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .record-card+.record-card {
    margin-top: 10px;
  }

  .record-card {
    color: #000;
    padding: 15px 10px;
    background-color: #fff;
    margin: 0 10px 10px 10px;

    .title {
      font-weight: 600;
      font-size: 35.56rpx;
    }

    .hr {
      margin: 12px 0;
      border-bottom: 1px solid #e6e6e6;
    }

    .remark-label {
      min-width: 80px;
    }

    .remark {
      word-break: break-all;
    }

    >view:not(.title):not(.hr)+view:not(.title):not(.hr) {
      margin-top: 8px;
    }

    >view:not(.title):not(.hr) {
      display: flex;
      justify-content: space-between;
    }

    >view:not(.title):not(.hr) :first-child {
      color: #666666;
    }
  }
</style>